<template>
	<div class="header-icons swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item , index) in result" :key="index">
				<div class="icons-item" v-for="txt in item">
					<img :src="txt.imgURL" >
					<p>{{txt.til}}</p>
				</div>				
			</div>
		</div>
		
	</div>
</template>

<script>
	import Swiper from 'swiper'
	export default{
		props:['IconList'],
		data(){
			// return {
			// 	IconList:[
			// 		{id:1,imgURL:require('@/assets/img/icon01.png'),til:'景点门票'},
			// 		{id:2,imgURL:require('@/assets/img/icon02.png'),til:'景点门票'},
			// 		{id:3,imgURL:require('@/assets/img/icon03.png'),til:'酒店'},
			// 		{id:4,imgURL:require('@/assets/img/icon04.png'),til:'机票'},
			// 		{id:5,imgURL:require('@/assets/img/icon05.png'),til:'攻略'},
			// 		{id:6,imgURL:require('@/assets/img/icon06.png'),til:'海外酒店'},
			// 		{id:7,imgURL:require('@/assets/img/icon07.png'),til:'低价机票'},
			// 		{id:8,imgURL:require('@/assets/img/icon08.png'),til:'汽车票船票'},
			// 		{id:9,imgURL:require('@/assets/img/icon09.png'),til:'自由行'},
			// 		{id:10,imgURL:require('@/assets/img/icon10.png'),til:'民宿客栈'},
			// 		{id:11,imgURL:require('@/assets/img/icon11.png'),til:'信用卡优惠'},
			// 		{id:12,imgURL:require('@/assets/img/icon12.png'),til:'旅游团购'},
					
			// 	]
			// }
		},
		mounted(){
			new Swiper ('.header-icons' ,{
				observer : true,
				observeParent : true
			})
		},
		computed:{
			result (){
				var arr = [];
				this.IconList.forEach((item , index)=>{
					var idx = Math.floor(index/8);
					if(!arr[idx]){
						arr[idx]=[]
					}
					arr[idx].push(item)
				})
				return(arr);
			}
		}
	}
</script>

<style scoped>
	.header-icons{
		width: 100%;
		padding-top: 0.3rem;
		background-color: white;
	}
	.icons-item{
		width: 25%;
		padding-bottom: 25%;		
		height: 0;
		text-align: center;
		float: left;
	}
	.icons-item img{
		width: 1.1rem;
		height: 1.1rem;
		
	}
	.icons-item p{
		font-size: 0.28rem;
		color: #212121;
		margin-top: 0.1rempx;
	}
</style>
